<template>
  <div class="simple-form">
   <el-form label-width="80px">
      <el-row>
        <!-- 头部 -->
        <el-col :span="24">
          <slot name="header"></slot>
        </el-col>
        <!-- 内容 -->
        <el-col :span="item.span?item.span:12" v-for="item in column">
          <el-form-item :label="item.label+':'">
            <slot :name="item.prop" v-if="item.formSlot"></slot>
            <span v-text="form[item.prop]" v-else></span>
          </el-form-item>
        </el-col>
        <!-- 尾部 -->
        <el-col :span="24">
          <slot name="footer"></slot>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  /**
   * ╮(￣▽ ￣)╭
   * simple-form: 极简表单，仅有两个功能：
   * 1.默认展示表单文本数据
   * 2.通过具名插槽在头部、内容、尾部插入自定义项目
   * 表单项自定义！样式自定义！贯彻自由且封装的极简风格。
   * props:
   *    form: 表单数据
   *    column: 
   *      label: 表单项label
   *      prop: form中对应的属性名
   *      span: 栅栏 max-24
   *      formSlot: 开启具名插槽，具名插槽使用——<slot #属性名></slot>
   */
  export default{
    props: {
      form: {
        type: Object,
        default: function(){
          return {name: '小明', sex: '女'}
        }
      },
      column: {
        type: Array,
        default: function(){
          return [{
            label: '姓名',
            prop: 'name',
            span: 12
          },{
            label: '性別',
            prop: 'sex',
            span: 12
          }]
        }
      }
    },
    data(){
      return{
      }
    },
  }
</script>
<style lang="scss">
.simple-form .el-form-item__label{
  font-weight: bold;
}
</style>
